import React, { Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Checkbox, Row, Col, Form, message } from "antd";
import styles from './sign.css';

const FormItem = Form.Item;

class Sign extends Component {
    constructor(props) {
        super();
        this.state = {
            checked: null,
            required: false,
            hasCheck: 0

        }
    }
    onChange = (e) => {
        if (e.target.checked) {
            this.setState({
                hasCheck: this.state.hasCheck + 1,
                required: true
            });
        } else {
            this.setState({ hasCheck: this.state.hasCheck - 1 });
            if (this.state.hasCheck === 1) {
                this.setState({ required: false });
            }
        }
    }

    handleSubmit = (msg) => {
        if (this.state.required) {
            this.props.form.validateFields(
                (err, value) => {
                    if (!err) {
                        value.Fourstate = this.state.checked; // 添加 第四页跳转标志
                        this.props.dispatch({
                            type: 'cardProcess/check',
                            payload: value
                        })
                    }
                }
            )
        } else {
            message.warning('请至少选择一个选项!');
            return false;
        }

    }
    // check = (e) => {
    //     this.setState({
    //         checkAgree: e.target.checked
    //     });
    // }

    componentWillMount() {
        this.setState({ checked: this.props.par_checks.fourthCheck });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const { par_checks } = this.props;
        return (
            <div className={styles.container}>
                <Form onSubmit={this.handleSubmit} className={styles.from}>
                    <Row>
                        <Col span={16}>
                            <FormItem className={styles.fromItem}>
                                {getFieldDecorator('YXT', {
                                    valuePropName: 'checked',
                                    initialValue: par_checks.YXT,
                                })(
                                    <Checkbox onChange={this.onChange}>银信通</Checkbox>
                                )}
                            </FormItem>
                            <FormItem className={styles.fromItem}>
                                {getFieldDecorator('ATM', {
                                    valuePropName: 'checked',
                                    initialValue: par_checks.ATM,
                                })(
                                    <Checkbox onChange={this.onChange}>ATM自动转账开通</Checkbox>
                                )}
                            </FormItem>
                            <FormItem className={styles.fromItem}>
                                {getFieldDecorator('mobileBank', {
                                    valuePropName: 'checked',
                                    initialValue: par_checks.mobileBank,
                                })(
                                    <Checkbox onChange={this.onChange}>手机银行</Checkbox>
                                )}
                            </FormItem>
                            <FormItem className={styles.fromItem}>
                                {getFieldDecorator('webBank', {
                                    valuePropName: 'checked',
                                    initialValue: par_checks.webBank,
                                })(
                                    <Checkbox onChange={this.onChange}>网上银行</Checkbox>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <div className={styles.divItem}>签约协议</div>
                            <div className={styles.divItem}>签约协议</div>
                            <div className={styles.divItem}>签约协议</div>
                            <div className={styles.divItem}>签约协议</div>
                        </Col>
                    </Row>
                </Form>
                <Row className={styles.checkItem}>
                    <Col span={24}>
                        <Checkbox
                            onChange={
                                (e) => (
                                    this.setState({ checked: e.target.checked }),
                                    this.props.dispatch({
                                        type: 'cardProcess/fourthCheck',
                                        payload: {
                                            checked: e.target.checked,
                                        }
                                    })
                                )
                            }
                            checked={this.state.checked}
                        >
                            本人已阅读以上签约协议，并同意照此办理。
                        </Checkbox>
                    </Col>
                </Row>
            </div>
        )
    }
}
Sign = Form.create({})(Sign);

function mapStateToProps(state) {
    const data = state.cardProcess.data;
    return { data };
}
export default connect(mapStateToProps)(Sign);

